/*
  https://flutter.cn/docs/development/ui/layout/tutorial

  源码链接：https://github.com/cfug/flutter.cn/blob/master/examples/layout/lakes/step6/lib/main.dart
 */

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '',
      home: Scaffold(
        appBar: AppBar(title: const Text('layout')),
        // body: Column(
        //   children: [
        //     banner,
        //     titleSection,
        //     buttonSection,
        //     textSection,
        //   ],
        // ),
        body: bodyContent(),
      ),
    );
  }
}

/*
对每一行进行图解。第一行，也就是标题区域，有三个子元素：一个文本列，一个星形图标，和一个数字。它的第一个子元素，文本列，包含两行文本。第一列占据大量空间，因此它应当被封装在一个 Expanded widget 当中。

  将 Column 元素放到 Expanded widget 中可以拉伸该列，以利用该行中所有剩余的闲置空间。设置 crossAxisAlignment 属性值为 CrossAxisAlignment.start，这会将该列放置在行的起始位置。

  将第一行文本放入 Container 容器中使得你可以增加内间距。列中的第二个子元素，同样为文本，显示为灰色。

  标题行中的最后两项是一个红色星形图标，和文字”41”。整行都在一个 Container 容器布局中，而且每条边都有 32 像素的内间距。

 */
Widget titleSection = Container(
  padding: const EdgeInsets.all(32),
  child: Row(
    children: [
      Expanded(
          child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            padding: const EdgeInsets.only(bottom: 8),
            child: const Text(
              'Oeschinen Lake Campground',
              style: TextStyle(fontWeight: FontWeight.bold),
            ),
          ),
          Text(
            'Kandersteg, Switzerland',
            style: TextStyle(color: Colors.grey[500]),
          )
        ],
      )),
      Icon(
        Icons.star,
        color: Colors.red[500],
      ),
      const Text('41')
    ],
  ),
);

/*

第三步: 实现按钮行
按钮区域包含三列使用相同布局－一行文本上面一个图标。此行的各列被等间隙放置，文本和图标被着以初始色。

由于构建每列的代码基本相同，因此可以创建一个名为 buildButtonColumn() 的私有辅助函数，以颜色、图标和文本为入参，返回一个以指定颜色绘制自身 widgets 的一个 column 列对象。

 */
Column _buildButtonColumn(Color parmColor, IconData icon, String label) {
  return Column(
    mainAxisSize: MainAxisSize.min,
    //默认情况下，行或列沿其主轴会占用尽可能多的空间，但如果要将子项紧密组合在一起，请将其 mainAxisSize 设置为 MainAxisSize.min。以下示例使用此属性将图标组合在一起
    mainAxisAlignment: MainAxisAlignment.center,
    // 对齐，使用 mainAxisAlignment 和 crossAxisAlignment 属性控制行或列如何对齐其子项。对于一行来说，主轴水平延伸，交叉轴垂直延伸。对于一列来说，主轴垂直延伸，交叉轴水平延伸。 因此设置主轴对齐方式为 spaceEvenly 会将空余空间在每个图像之间、之前和之后均匀地划分
    children: [
      Icon(icon, color: parmColor),
      Container(
        margin: const EdgeInsets.only(top: 8),
        child: Text(
          label,
          style: TextStyle(
              fontSize: 12, fontWeight: FontWeight.w400, color: parmColor),
        ),
      )
    ],
  );
}

/*
  这个函数直接将图标添加到这列里。文本在以一个仅有上间距的 Container 容器中，使得文本与图标分隔开。

通过调用函数并传递针对某列的颜色，Icon 图标和文本，来构建包含这些列的行。然后在行的主轴方向通过使用 MainAxisAlignment.spaceEvenly，将剩余的空间均分到每列各自的前后及中间。只需在 build() 方法中的 titleSection 声明下添加如下代码：

 */
// Color color = Theme.of(context).primaryColor;
Color color = Colors.blue;
Widget buttonSection = Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    _buildButtonColumn(color, Icons.call, 'Call'),
    _buildButtonColumn(color, Icons.near_me, 'ROUTE'),
    _buildButtonColumn(color, Icons.share, 'SHARE'),
  ],
);

/*
第四步: 实现文本区域
将文本区域定义为一个变量，将文本放置到一个 Container 容器中，然后为每条边添加内边距。只需在 buttonSection 声明下添加如下代码：
 */

//通过设置 softwrap 为 true，文本将在填充满列宽后在单词边界处自动换行。
Widget textSection = Container(
  padding: EdgeInsets.all(32),
  child: Text(
    softWrap: true,
    'Lake Oeschinen lies at the foot of the Blüemlisalp in the Bernese '
    'Alps. Situated 1,578 meters above sea level, it is one of the '
    'larger Alpine Lakes. A gondola ride from Kandersteg, followed by a '
    'half-hour walk through pastures and pine forest, leads you to the '
    'lake, which warms to 20 degrees Celsius in the summer. Activities '
    'enjoyed here include rowing, and riding the summer toboggan run.',
  ),
);

//第五步: 实现图片区域
Widget banner = Image.asset(
  'images/buildlayout/lake.jpg',
  width: 600,
  height: 240,
  fit: BoxFit.cover, //BoxFit.cover 告诉系统图片应当尽可能等比缩小到刚好能够覆盖住整个渲染 box。
);

//第六步: 最终的收尾
// 在最后的步骤中，需要在一个 ListView 中排列好所有的元素，而不是在一个 Column 中，因为当 app 运行在某个小设备上时，ListView 支持 app body 的滚动。

Widget bodyContent() {
  return ListView(
    children: [
      banner,
      // const Divider(),
      titleSection,
      banner, // 这里为了测试滚动效果
      buttonSection,
      textSection,
    ],
  );
}
